<template>
  <div class="shop">
    <p>欢迎光临_vue开发的收银系统_水果店</p>
    <table>
        <th>
            苹果10¥/斤，折扣 8 折 
        </th>
        <tr>
            <td>
             请输入你要购买的斤数<input type="number" v-model.number="num" controls-position="right" @change="handleChange" :min="1" :max="10">
            </td>
        </tr>
        <tr>
            <td>
                <button @click="payFn">结账买单~</button>
            </td>
        </tr>
        <tr>
            <td>
                <span>
                    结账单:总价:{{total}}¥元 折后价:{{discount}}¥元 省了:{{save}}¥元
                </span>
            </td>
        </tr>
    </table>
  </div>
</template>

<script>
 export default {
    data() {
      return {
        num: 1,
        total:'',
        discount:'',
        save:'',
      }
    },
    methods: {
      handleChange(value) {
        console.log(value)
      },
      payFn(){
        this.total = 10 * this.num
        this.discount =0.8 * this.total
        this.save = 0.2 * this.total
      } 
    }
  }
</script>

<style>
.shop {
    text-align: center;
}
table {
    margin: 0 auto;
    width: 600px;   
}
table, th, td {
  border: 1px solid black;
}
</style>